<template>
    <div class="app-container">
        <el-row >
            <el-col >
                <div class="head-container">
                    <el-input v-model="keyWord"  clearable placeholder="输入分类名称搜索" style="width: 200px;" class="filter-item"></el-input>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator=":"
                        class="el-range-editor--small filter-item"
                        style="height: 30.5px;width: 220px;"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                    <!-- <el-select clearable placeholder="状态" class="filter-item" style="width: 90px">
                        <el-option />
                    </el-select> -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                    </div>
                    <!-- 新增 -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleAdd(null,'add')">新增</el-button>
                    </div>
                    <!-- 导出 -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download">导出</el-button>
                    </div>
                    <div style="float:right">
                        <el-button size="mini" icon="el-icon-refresh" @click="getData()">刷新</el-button>
                    </div>
                </div>
            </el-col>   
        </el-row>
        <div>
            <el-table v-loading="tableLoading" :data="tableData" size="small" 
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :default-expand-all="expand"
            row-key="id" 
            style="width: 100%;">
                <el-table-column prop="name" label="分类名称" />
                <el-table-column prop="sort" label="排序权值" />
                <el-table-column prop="remark" label="备注"/>
                <el-table-column label="状态" align="center" width="100px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" 
                            active-color="#409EFF" 
                            inactive-color="#F56C6C"
                            :active-value="1"
                            :inactive-value="0"
                        @change="changeEnabled(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column prop="updateTime" label="更新时间" />
                <el-table-column label="操作" width="125" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleAdd(scope.row,'edit')"/>
                        <el-popover :ref="scope.row.id" placement="top" width="180">
                            <p>确定删除本条数据吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()" >取消</el-button>
                                <el-button :loading="delLoading" type="primary" size="mini" @click="delCommit(scope.row)">确定</el-button>
                            </div>
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
                <!--分页组件-->
        </div>
        <div>
            <category-add-and-edit ref="categoryAddAndEdit"></category-add-and-edit>
        </div>
    </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import { delCategory,editCategory,queryTreeCategory } from "@/api/category"
import AddAndEdit from '@/views/blog/category/dialog/AddAndEdit'
export default {
    name: "Category",
    // 设置数据字典
    components:{
        'category-add-and-edit':AddAndEdit  //新增/编辑文章分类组件
    },
    data() {
        return{
            //==========>分页相关<==========//
            total      : 0,           // 总页数
            pageNum    : 1,           // 第几页
            pageSize   : 10,          // 每页显示的数量
            currentPage: 1,           // 当前页
            //==========>分页相关<==========//
            keyWord     : '',//查询关键字
            date        : [],//查询时间
            tableData   : [],
            tableLoading: false,
            delLoading:false,
            expand: false
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            //调用获取文章分类api
            this.apiQueryTreeCategory()
        },
        //删除文章分类
        delCommit(row){
            this.apiDelCategoryById(row.id)
        },
        changeEnabled(row){
            this.editCategoryStatus(row.id,row.status)
        },
        handleAdd(row,type){
            let isAdd = (type === 'add'? true:false)
            this.$nextTick(()=>{
                this.$refs.categoryAddAndEdit.init(row,isAdd)
            })
        },
        search(){
            this.apiQueryTreeCategory()
        },
        changExpand() {
            this.expand = !this.expand;
            // this.init();
        },
        //==========>分页相关<==========//
        //==========>分页相关<==========//
        //==========>请求api接口<==========//
        //更新文章分类状态（启用不启用）
        editCategoryStatus(id,status){
            let params = {
                id : id,
                status : status
            }
            this.apiEditCategory(params)
        },
        //查询文章分类树
        apiQueryTreeCategory(){
            //管理员查询接口
            this.tableLoading =true
            let params = {
                keyWord : this.keyWord
            }
            !!this.date && (params.date = this.date.join(','))
            queryTreeCategory(params).then(res=>{
                if(res.code ===200){
                    this.tableData    = res.data
                    this.total        = res.data.length
                    this.tableLoading = false
                }
            }).catch((err)=>{
                this.tableLoading = false
            })
        },
        //通过文章分类id删除文章分类
        apiDelCategoryById(id){
            //管理员删除接口
            this.delLoading =true
            delCategory(id).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.delLoading = false
                    this.$refs[id].doClose()
                    this.apiQueryTreeCategory()
                }
            }).catch((err)=>{
                this.$refs[id].doClose()
                this.delLoading = false
            })
        },
        //更新文章分类
        apiEditCategory(admin){
            //管理员删除接口
            editCategory(admin).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.apiQueryTreeCategory()
                }
            }).catch((err)=>{
            })
        },
        //==========>请求api接口<==========//
    }
        
}
</script>
<style scoped>
</style>